<template>
  <div>
    <home-head menu-title="我的菜单"></home-head>
  </div>
  <div class="item_center" style="background-color: #232C63">
    <div class="box_size">
        <el-container>
          <el-aside width="200px">
            <el-menu
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                router
                active-text-color="red"
            >
              <el-menu-item index="/person/personal-information">
                <el-icon>
                  <svg t="1700581184060" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="6378" width="200" height="200">
                    <path
                        d="M469.333333 682.666667c0-46.933333-38.4-85.333333-85.333333-85.333334s-85.333333 38.4-85.333333 85.333334H256c0-72.533333 55.466667-128 128-128s128 55.466667 128 128h-42.666667zM896 256v554.666667H170.666667V256h725.333333zM213.333333 298.666667v469.333333h640V298.666667H213.333333z m597.333334 128v42.666666h-256v-42.666666h256z m0 85.333333v42.666667h-256v-42.666667h256z m-42.666667 85.333333v42.666667h-213.333333v-42.666667h213.333333z m-384-42.666666c-46.933333 0-85.333333-38.4-85.333333-85.333334s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333-38.4 85.333333-85.333333 85.333334z m0-42.666667c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666666-42.666667 17.066667-42.666667 42.666666 17.066667 42.666667 42.666667 42.666667z"
                        fill="#444444" p-id="6379"></path>
                  </svg>
                </el-icon>
                <span>个人信息</span>
              </el-menu-item>
              <el-menu-item index="/person/person-order">
                <el-icon>
                  <svg t="1700581078840" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="4205" width="200" height="200">
                    <path
                        d="M883.2 60.8l-89.6 0c-12.8 0-25.6 9.6-25.6 25.6s9.6 25.6 25.6 25.6l89.6 0c25.6 0 48 22.4 48 48l0 713.6c0 25.6-22.4 48-48 48l-736 0c-25.6 0-48-22.4-48-48l0-713.6c0-25.6 22.4-48 48-48l99.2 0c12.8 0 25.6-9.6 25.6-25.6s-9.6-25.6-25.6-25.6l-99.2 0c-54.4 0-96 41.6-96 96l0 713.6c0 54.4 41.6 96 96 96l736 0c54.4 0 96-41.6 96-96l0-713.6C979.2 102.4 934.4 60.8 883.2 60.8z"
                        p-id="4206"></path>
                    <path
                        d="M393.6 108.8l240 0c12.8 0 25.6-9.6 25.6-25.6s-9.6-25.6-25.6-25.6l-240 0c-12.8 0-25.6 9.6-25.6 25.6S380.8 108.8 393.6 108.8z"
                        p-id="4207"></path>
                    <path
                        d="M294.4 345.6l464 0c12.8 0 25.6-9.6 25.6-25.6s-9.6-25.6-25.6-25.6l-464 0c-12.8 0-25.6 9.6-25.6 25.6S278.4 345.6 294.4 345.6z"
                        p-id="4208"></path>
                    <path
                        d="M294.4 540.8l464 0c12.8 0 25.6-9.6 25.6-25.6s-9.6-25.6-25.6-25.6l-464 0c-12.8 0-25.6 9.6-25.6 25.6S278.4 540.8 294.4 540.8z"
                        p-id="4209"></path>
                    <path
                        d="M294.4 736l464 0c12.8 0 25.6-9.6 25.6-25.6s-9.6-25.6-25.6-25.6l-464 0c-12.8 0-25.6 9.6-25.6 25.6S278.4 736 294.4 736z"
                        p-id="4210"></path>
                  </svg>
                </el-icon>
                <span>我的订单</span>
              </el-menu-item>
              <el-menu-item index="/person/person-cart">
                <el-icon>
                  <svg t="1700581132777" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="5343" width="200" height="200">
                    <path
                        d="M841.088 661.59616H374.14912c-80.4352 0-146.16576-65.72544-146.16576-146.16064V280.9856H937.216c28.45184 0 51.01056 22.55872 51.01056 51.00544v182.46144c0.00512 81.41824-65.7152 147.14368-147.13856 147.14368M281.94304 334.93504v179.52256c0 51.00544 41.19552 92.20608 92.20608 92.20608h466.93888c51.00544 0 92.20608-41.20064 92.20608-92.20608V334.93504H281.94304z"
                        fill="#4C4C4C" p-id="5344"></path>
                    <path
                        d="M254.46912 552.70912c-14.71488 0-27.4688-11.776-27.4688-27.46368V330.02496c0-86.31808-70.62528-156.9536-156.94848-156.9536-14.71488 0-27.4688-11.77088-27.4688-27.46368s11.77088-27.4688 27.4688-27.4688c116.736 0 211.8912 95.15008 211.8912 211.88608v195.21536c0 15.6928-11.77088 27.4688-27.47392 27.4688m81.42336 353.14688c-59.84256 0-108.89216-49.03936-108.89216-108.88704s49.05472-108.88704 108.89216-108.88704c59.83744 0 108.88704 49.03936 108.88704 108.88704s-49.0496 108.88704-108.88704 108.88704m0-162.8416c-30.40768 0-53.94944 24.5248-53.94944 53.95456 0 29.42464 24.51968 53.94944 53.94944 53.94944 30.40768 0 53.94944-24.5248 53.94944-53.94944 0.00512-29.42976-23.53664-53.95456-53.94944-53.95456m515.98848 162.8416c-59.84256 0-108.89216-49.03936-108.89216-108.88704s49.0496-108.88704 108.89216-108.88704 108.88192 49.03936 108.88192 108.88704-49.04448 108.88704-108.88192 108.88704m0-162.8416c-30.4128 0-53.94944 24.5248-53.94944 53.95456 0 29.42464 24.51968 53.94944 53.94944 53.94944 29.42464 0 53.95456-24.5248 53.95456-53.94944 0-29.42976-23.54688-53.95456-53.95456-53.95456M662.5536 566.44096H363.36128c-22.56384 0-41.20064-18.6368-41.20064-41.19552 0-22.56384 18.6368-41.20064 41.20064-41.20064h298.20928c22.56384 0 41.20064 18.6368 41.20064 41.20064 0 22.55872-18.6368 41.19552-40.2176 41.19552"
                        fill="#4C4C4C" p-id="5345"></path>
                  </svg>
                </el-icon>
                <span>我的购物车</span>
              </el-menu-item>
              <el-menu-item index="/person/square-add">
                <el-icon>
                  <el-image :src="require('@/assets/person/appraise.png')"/>
                </el-icon>
                <span>创建动态</span>
              </el-menu-item>
              <el-menu-item index="/person/person-appraise">
                <el-icon>
                  <el-image :src="require('@/assets/person/appraise.png')"/>
                </el-icon>
                <span>我的评价</span>
              </el-menu-item>
              <el-menu-item index="/person/person-address">
                <el-icon>
                  <el-image :src="require('@/assets/person/address.png')"></el-image>
                </el-icon>
                <span>收货地址</span>
              </el-menu-item>
              <el-menu-item index="/person/person-message">
                <el-icon>
                  <el-image :src="require('@/assets/person/message.png')"></el-image>
                </el-icon>
                <span> <el-badge :value="12" class="item">
                我的消息
              </el-badge></span>
              </el-menu-item>
            </el-menu>
          </el-aside>
            <el-main>
              <router-view></router-view>
            </el-main>
        </el-container>
    </div>
  </div>
</template>

<script setup>
import HomeHead from "@/components/home/HomeHead";
</script>

<style scoped>
.item_center {
  display: flex;
  justify-content: center;
}

.box_size {
  width: 1200px;
}

.el-aside {
  background-color: #1DAEEE;
  height: 80vh;
}
.el-menu {
  background: transparent;
  height: 100%;
}

</style>
